<template>
	<view class="release-content">
		<!-- 发布到 -->
		<view class="choose-cont" @click="openChoose">
			<text>频道分类</text>

			<view class="choose-to" v-if="select">
				<text style="color:#000">{{circleType}}</text>
				<image src="/static/forum/back1.png" mode="aspectFit"></image>
			</view>

			<view class="choose-to" v-else>
				<text>请选择频道分类</text>
				<image src="/static/forum/back1.png" mode="aspectFit"></image>
			</view>
		</view>

		<!-- 主题内容 -->
		<view class="release-main">
			<!-- <view style="display: flex;"> -->
			<view class="cover-title" style="margin-right: 10rpx;">频道名称</view>
			<input class="detail-title" placeholder="请填写频道名称... " v-model="circleName">
			<!-- </view> -->
			<view class="cover-title">频道详情</view>
			<textarea class="detail-content" maxlength="-1" placeholder="请输入频道详情..." v-model="circleContent"
				placeholder-style="font-size:32rpx;color:#979797;padding:20rpx" />
		</view>

		<!-- 频道封面 -->
		<view class="circle-cover">
			<view class="cover-title">频道封面(1张)</view>
			<view class="cover-showimg">
				<image :src="imgpath" mode="aspectFill" v-if="imgpath"></image>
				<image src="/static/forum/del.png" mode="aspectFill" v-show="delShow" class="del" @click="delEn()">
				</image>
			</view>
			<image src="/static/forum/Group.png" mode="aspectFit" @click="plusImg" v-show="plusShow"></image>

		</view>

		<!-- 缺省 -->
		<view class="default-height" style="width: 100%;height: 92rpx;"></view>
		<view class="button-content">
			<button class="confirm-release" @click="confirmRelease">确认{{btnWord}}</button>
		</view>
	</view>
</template>

<script>
	import ikz from '@/pages/Common/tools.js';
	var app = getApp()
	export default {
		data() {
			return {
				newIndex: 1,
				delShow: false, //删除号的控制
				plusShow: true, //加号的控制
				number: 9, //上传图片数量
				imgpath: '', //图片临时路径
				infoData: [],
				itemList: [],
				circleType: '', //频道所属类型
				circleId: '', //发布到的频道id
				select: '', //选择发布到的内容
				btnWord: '发布',
				circleName: '', //频道名称
				circleContent: '', //频道内容
				isModify: false,

				id: '', //频道详情id
				imgTemp:'',//临时图片，修改频道没修改图片的时候就不需要上传图片了
			}
		},
		onLoad(options) {
			if (options.id) {
				uni.showLoading({
					mask: true
				})
				this.id = options.id
				this.btnWord = '修改'

				this.select = 1
				this.isModify = true
				this.getCircleDetails()
			}
			uni.setNavigationBarTitle({
				title: this.btnWord + '频道'
			})
			this.getCircleCategory()
		},
		onShow() {
			uni.hideHomeButton({
				complete: () => {
					//console.log("成功")
				}
			})
		},
		methods: {
			// 选择分类
			openChoose() {
				this.itemList = []
				this.infoData.forEach(el => {
					this.itemList.push(el.name)
				})
				uni.showActionSheet({
					itemList: this.itemList,
					success: (res) => {
						// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						this.select = res.tapIndex + 1
						// console.log(this.select)
						this.infoData.forEach((el, index) => {
							if (index == res.tapIndex) {
								this.circleId = el.id
								// console.log(this.circleId);
							}
						})
						this.circleType = this.itemList[this.select - 1]
					},
					fail: (res) => {
						// console.log(res.errMsg);
					}
				});
			},
			// 添加图片
			plusImg() {
				uni.chooseImage({
					count: this.number,
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.imgpath = res.tempFilePaths[0]
						if (this.imgpath) {
							this.delShow = true
							this.plusShow = false
						} else {
							this.delShow = false
							this.plusShow = true
						}
					}
				})
			},
			// 删除图片
			delEn() {
				// console.log(index)
				this.imgpath = ''
				this.delShow = false
				this.plusShow = true
			},
			// 确认发布
			confirmRelease() {
				if (this.circleType == '') {
					uni.showToast({
						title: '请选择发布频道类型',
						icon: 'none'
					})
					return
				}
				if (this.circleName == '') {
					uni.showToast({
						title: '频道名称不能为空',
						icon: 'none'
					})
					return
				}
				if (this.circleContent == '') {
					uni.showToast({
						title: '频道详情不能为空',
						icon: 'none'
					})
					return
				}
				if (this.imgpath == '') {
					uni.showToast({
						title: '请上传频道封面',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title:'上传中',
					mask: true
				})
				if(this.imgTemp != '' && this.imgTemp == this.imgpath){
					this.addCircle(this.imgTemp)
					return
				}
				let path = "/common/upload";
				let data = {}
				let file_path = this.imgpath.toString()
				ikz.up(path, data, 'file', file_path, res => {
					// console.log(JSON.parse(res.data).data.img_path);
					if (res.statusCode == 200) {
						this.addCircle(JSON.parse(res.data).data.url)
					}
					uni.hideLoading()
				})
			},
			// 添加频道
			addCircle(imgUrl) {
				let path = '';
				if (this.id != '') {
					path = '/xyb/posts/posts_circle/edit'
				} else {
					path = "/xyb/posts/posts_circle/add";
				}
				let data = {
					token: uni.getStorageSync('local_user_session'),
					category_id: this.circleId,
					title: this.circleName,
					desc: this.circleContent,
					image: imgUrl
				}
				if(this.id != ''){
					data.id = this.id
				}
				ikz.requestPost(path, data, res => {
					// console.log('添加频道', res);
					if (res.statusCode == 200) {
						uni.redirectTo({
							url: '/pages/Component/forum/Program/circle/success?type=' + this.isModify
						})
					}
				})
			},

			// 获取频道分类
			getCircleCategory() {
				let path = '/xyb/posts/posts_circle/category'
				let data = {}
				ikz.requestPost(path, data, res => {
					// console.log('获取频道分类', res.data.data)
					if (res.statusCode == 200) {
						this.infoData = res.data.data
					}
				})
			},
			// 获取频道详情
			getCircleDetails() {
				let path = '/xyb/posts/posts_circle/details'
				let data = {
					token: uni.getStorageSync('local_user_session'),
					id: this.id
				}
				ikz.request(path, data, res => {
					console.log('获取频道详情', res.data.data)
					if (res.statusCode == 200) {
						this.circleType = res.data.data.name
						this.circleId = res.data.data.category_id
						this.circleName = res.data.data.title
						this.circleContent = res.data.data.desc
						this.imgpath = res.data.data.image
						this.imgTemp = res.data.data.image
						this.delShow = true
						this.plusShow = false
					}
					uni.hideLoading()
				})
			},
		}


	}
</script>

<style lang="scss">
	page {
		background: #F6F7FB;
	}

	.release-content {
		.choose-cont {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #FFFFFF;
			height: 100rpx;
			padding: 20rpx;

			>text {
				font-size: 32rpx;
			}

			.choose-to {
				display: flex;
				align-items: center;
				line-height: 44rpx;

				text {
					font-size: 32rpx;
					color: #979797;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					display: block;
				}
			}
		}

		.release-main {
			margin-top: 20rpx;
			background-color: #FFFFFF;
			padding: 26rpx;

			.cover-title {
				font-size: 32rpx;
				color: #000000;
				margin-bottom: 30rpx;
			}

			.detail-title {
				padding: 20rpx;
				font-size: 32rpx;
				color: #979797;
				background: #F8F8F8;
				margin-bottom: 30rpx;
			}

			.detail-content {
				padding: 20rpx;
				width: 95%;
				height: 300rpx;
				color: #979797;
				background: #F8F8F8;
				border-radius: 18rpx;
			}
		}

		.circle-cover {
			background-color: #FFFFFF;
			padding: 26rpx;

			.cover-title {
				font-size: 32rpx;
				color: #000000;
				margin-bottom: 30rpx;
			}

			image {
				width: 128rpx;
				height: 128rpx;
				border-radius: 18rpx;
			}

			.cover-showimg {
				position: relative;
				display: flex;
				width: 128rpx;
				// margin-right: 30rpx;

				.del {
					position: absolute;
					width: 32rpx;
					height: 32rpx;
					top: 1rpx;
					right: 1rpx;
				}
			}
		}

		.button-content {
			height: 105rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			z-index: 999;
			padding: 20rpx;

			.confirm-release {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 48rpx;
				background: #FB7A26;
				color: #fff;
				font-size: 36rpx;
			}

			button::after {
				border: none;
			}
		}



		.modal-release {
			position: relative;
			z-index: 500;

			.popup-tips {
				margin-top: -80rpx;

				.popup-cont {
					position: relative;

					image {
						width: 480rpx;
					}

					.tag {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						background: #fff;
						text-align: center;
						border-radius: 18rpx;
						font-size: 32rpx;
						width: 620rpx;
						padding: 15rpx 30rpx;

						label {
							display: flex;
							justify-content: space-between;
							padding: 15rpx 0;
						}
					}
				}
			}
		}
	}
</style>
